import { Modal, Select } from 'antd';
import { useState, forwardRef, useImperativeHandle } from 'react'
import { setUserRoles } from '../../../api/user';
function SetRoles(props: any, ref: any) {
    let {rolesList} = props;
    // 定义控制对话框显示与隐藏状态
    let [isModalOpen, setIsModalOpen] = useState(false);
    // 定义当前传递过来的用户数据
    let [recoder, setRecoder] = useState<UsersTableItem>();
    // 当前选中的角色id
    let [rid,setRid]= useState(0);
    // 点击取消时调用
    let handleCancel = () => {
        setIsModalOpen(false)
    }
    // 定义init初始化方法
    let init = (recoder: UsersTableItem): void => {
        setRecoder(recoder)
        setIsModalOpen(true)
    }
    // 当select发生改变时触发
    let handleChange = (value:number)=>{
        console.log(value)
        setRid(value);
    }
    useImperativeHandle(ref, () => {
        return {
            init
        }
    })
    // 确定分配角色
    let okHandle = async ()=>{
        let res:ResponsType = await setUserRoles({rid},recoder?.id);
        setIsModalOpen(false);
        // 告诉父组件请求完了
        props.over(res)

    }
    return (
        <Modal title={"分配角色"} open={isModalOpen} onCancel={handleCancel} cancelText='取消' okText='确定' onOk={okHandle}>
            <div>
                当前用户：{recoder?.username}
            </div>
            <div style={{margin:"15px 0"}}>
                当前角色：{recoder?.role_name}
            </div>
            <div>
                分配新角色：  <Select
                    style={{ width: 120 }}
                    onChange={handleChange}
                    fieldNames={{
                        label:"roleName",
                        value:"id"
                    }}
                    placeholder='请您选择角色'
                    options={rolesList}
                />
            </div>
        </Modal>
    )
}
export default forwardRef(SetRoles);